<template>
    <div class="mg-tb">
        <!--利用mui实现商品列表 -->
        <div class="mui-content" style="background-color:#fff">
            <ul class="mui-table-view mui-grid-view">
                <!--获取数据要在Li中进行遍历-->
                <li v-for="(item,index) in list" :key="index" class="mui-table-view-cell mui-media mui-col-xs-6">
                    <router-link v-bind="{to:'/goods/goodsinfo/'+item.id}">
                        <img class="mui-media-object" :src="item.img_url">
                        <div class="mui-media-body" v-text="item.title"></div>
    
                        <!--自定义部件-->
                        <div id="describe">
                            <span>￥{{item.sell_price}}</span>
                            <s>￥{{item.market_price}}</s>
                            <p class="left">热卖中</p>
                            <p class="right">剩余{{item.stock_quantity}}件</p>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
    
        <!--3.实现获取更多按钮-->
        <mt-button class="btn" type="danger" size="large" plain @click="getmore">加载更多评论</mt-button>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
import apiphoto from '../../kits/Common.js';
export default {
    data() {
        return {
            pageindex: 1,
            list: []    //存放商品列表数据
        }
    },
    created() {
        this.goodslist(this.pageindex);
    },
    methods: {
        // 点击加载更多
        getmore() {
            this.pageindex++;
            // 获取当前this.pageindex值获取的分页数据
            this.goodslist(this.pageindex);
        },
        // 获取商品列表数据
        goodslist(pageindex) {
            pageindex = pageindex || 1;
            //确定Url http://182.254.146.100:8899/api/getgoods?pageindex=1
            var url = apiphoto.apiphoto + "/api/getgoods?pageindex=" + pageindex;
            this.$http.get(url).then(function (res) {
                var body = res.body;
                if (body.status != 0) {
                    Toast(body.message);
                    return;
                }
                // 当服务器返回正常的数据做赋值操作
                //利用concat方法链接当前的数组以及服务器返回来的新数组（body.message）
                this.list = this.list.concat(body.message);
            })
        }
    }
}
</script>

<style scoped>
.btn {
    margin-top: 10px;
}

.mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn) {
    margin: 0;
}

.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
    color: #099;
    padding-left: 10px;
}

#describe {
    background-color: #eee;
    padding: 5px;
    position: relative;
    padding-bottom: 25px;
    margin-top: 10px;
}

#describe s {
    color: #bbb;
    margin-left: -60px;
    font-size: 14px;
}

#describe span {
    color: red;
    float: left;
}

#describe p {
    position: absolute;
    bottom: 0;
}

#describe .left {
    left: 15px;
}

#describe .right {
    right: 15px;
    ;
}

.mui-table-view.mui-grid-view .mui-table-view-cell,
.mui-table-view.mui-grid-view {
    padding: 0px;
}

.mui-table-view.mui-grid-view li {
    border: 1px solid #ddd;
    margin-top: 5px;
    margin-left: 1px;
    box-shadow: 0 0 4px #099;
    margin-bottom: 1px;
}
</style>